<template>
    <div class="warp">
        <div class="title">机动车停车管理</div>
        <div class="mychart" id="carParkingChart"></div>
    </div>
</template>
<script>
export default{
  props: ['autoParkCount', 'usedPermanentCarParkCount', 'usedTemporaryCarParkCount'],
  data () {
    return {
      motoCarData: [{
        name: '常驻车辆', // 机动车类型
        value: 0 // 机动车数量
      }, {
        name: '临停车辆',
        value: 0
      }, {
        name: '空闲车位',
        value: 0
      }]

    }
  },
  watch: {
    autoParkCount () {
      this.initPage()
    }
  },
  mounted () {
    this.initPage()
  },
  methods: {
    initPage () {
      if (!this.usedPermanentCarParkCount || !this.usedTemporaryCarParkCount || !this.autoParkCount) {
        return
      }

      this.motoCarData[0].value = this.usedPermanentCarParkCount
      this.motoCarData[1].value = this.usedTemporaryCarParkCount
      this.motoCarData[2].value = this.autoParkCount - this.usedPermanentCarParkCount - this.usedTemporaryCarParkCount
      this.echartFn()
    },
    echartFn () {
      let temp = this.motoCarData
      let charts = this.$echarts.init(
        document.getElementById('carParkingChart')
      )
      let option = {
        color: ['#50E3C2', '#00A5ED', 'rgba(0,0,0,0.20)'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          orient: 'vertical',
          padding: [30, 0, 0, 0],
          x: 'left',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: '#9FACC3',
            padding: [0, 0, 0, 5]
          },
          data: ['常驻车辆', '临停车辆', '空闲车位']
        },
        title: {
          subtext: '总数',
          text: this.autoParkCount,
          x: 'center',
          y: 'center',
          left: 166,
          top: 38,
          textAlign: 'center',
          itemGap: 3,
          textStyle: {
            color: '#50E3C2',
            fontSize: 18,
            fontWeight: 'normal',
            align: 'center'
          },
          subtextStyle: {
            color: '#50E3C2',
            fontSize: 12,
            fontFamily: 'Quartz'
          }
        },
        series: [{
          name: false,
          type: 'pie',
          radius: ['66%', '82%'],
          center: ['75%', '50%'],
          selectedOffset: 5,
          hoverOffset: 4,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: false,
              textStyle: {
                fontSize: '12',
                fontWeight: 'bold'
              }
            }
          },
          data: temp
        }]
      }
      charts.setOption(option, true)
    }
  }
}
</script>
<style lang="less" scoped>
.skin-white{
    .title{
        color: #4C6072!important;
    }
}
.warp{
    padding: 20px;
    display: flex;
    display:-webkit-flex;
    flex-direction: row;
    position: relative;
}
.title{
    position: absolute;
    top:20px;
    left:20px;
    color: #fff;
}
.mychart{
    margin-top: 10px;
    width: 230px;
    height: 120px;
}
</style>
